
Ext.require([
    'Ext.form.*',
    'Ext.Img',
    'Ext.tip.QuickTipManager'
]);

Ext.onReady(function() {
    Ext.tip.QuickTipManager.init();
    var formPanelPerfil = Ext.widget('form', {
        renderTo: 'usuario_extjs',
        frame: true,
        width: 380,
        bodyPadding: 20,
        bodyBorder: true,
        iconCls: 'icon-perfil',
        title: 'PERFIL DE USUARIO',
        defaults: {
            anchor: '100%'
        },
        items: [{
            xtype: 'textfield',
            name: 'nombreUsuario',
            fieldLabel: '<b>Nombre Usuario</b>',
            fieldStyle: 'background-color: transparent; border: none; background-image: none;',
            readOnly: true,
            allowBlank: false,
            itemId: 'f_nombreUsuario',
            
        },{
            xtype: 'textfield',
            name: 'nombre',
            fieldLabel: '<b>Nombre</b>',
            fieldStyle: 'background-color: transparent; border: none; background-image: none;',
            itemId: 'f_nombre',

        },{
            xtype: 'textfield',
            name: 'apellido',
            fieldLabel: '<b>Apellido</b>',
            fieldStyle: 'background-color: transparent; border: none; background-image: none;',
            itemId: 'f_apellido',

        },{
            xtype: 'textfield',
            name: 'telefono',
            fieldLabel: '<b>Nro Telefono</b>',
            fieldStyle: 'background-color: transparent; border: none; background-image: none;',
            itemId: 'f_nroTelefono',

        },{
            xtype: 'textfield',
            name: 'nroDocumento',
            fieldLabel: '<b>Nro Documento</b>',
            fieldStyle: 'background-color: transparent; border: none; background-image: none;',
            itemId: 'f_nroDocumento',

        },{
            xtype: 'textfield',
            name: 'email',
            fieldLabel: '<b>Email</b>',
            vtype: 'email',
            itemId: 'f_mail',
            fieldStyle: 'background-color: transparent; border: none; background-image: none;',
			allowBlank: false
        },{
            xtype: 'textfield',
            name: 'inicioSesion',
            readOnly: true,
            fieldLabel: '<b>Ultimo Inicio de Sesion</b>',
            fieldStyle: 'background-color: transparent; border: none; background-image: none;',
            itemId: 'f_inicioSesion',

        },{
            xtype: 'textfield',
            name: 'cierreSesion',
            readOnly: true,
            fieldLabel: '<b>Ultimo Cierre de Sesion</b>',
            fieldStyle: 'background-color: transparent; border: none; background-image: none;',
            itemId: 'f_cierreSesion',

        }],

        dockedItems: [{
            xtype: 'container',
            dock: 'bottom',
            layout: {
                type: 'hbox',
                align: 'middle'
            },
            padding: '10 0 5',

            items: [{
                xtype: 'button',
                itemId: 'password',
                iconCls: 'icon-password',
                text: '<b>Cambiar Contraseña</b>',
                width: 140,
                handler: function() {
                    win = Ext.create('widget.window', {
					width: 350,
					iconCls: 'icon-password',
					title: 'CAMBIAR CONTRASEÑA',
					closable: true,
					plain: true,
					layout: 'fit',
					items: [floater = Ext.create('Ext.Component', {
						xtype: 'component',
						floating: {
							shadow: false
						}
					}), formPanel = Ext.widget('form', {

					frame: true,
					bodyPadding: 10,
				
					defaults: {
						anchor: '100%'
					},

					items: [{
						xtype: 'textfield',
						name: 'passwordActual',
						fieldLabel: 'Password Actual',
						inputType: 'password',
						style: 'margin-top:10px',
						allowBlank: false,
					   
					},{
						xtype: 'textfield',
						name: 'password1',
						fieldLabel: 'Password Nuevo',
						inputType: 'password',
						style: 'margin-top:10px',
						allowBlank: false,
					   
					}, {
						xtype: 'textfield',
						name: 'password2',
						fieldLabel: 'RepetirPassword',
						inputType: 'password',
						style: 'margin-top:10px',
						allowBlank: false,
						validator: function(value) {
							var password1 = this.previousSibling('[name=password1]');
							return (value === password1.getValue()) ? true : 'Las contraseñas no coinciden'
						}
					   
					}],

					dockedItems: [{
						xtype: 'container',
						dock: 'bottom',
						layout: {
							type: 'hbox',
							align: 'middle'
						},
						items: [{
							xtype: 'button',
							formBind: true,
							disabled: true,
							text: 'Guardar',
							iconCls: 'icon-save',
							width: 70,
							handler: function() {
								
								var form = this.up('form').getForm();
								form.submit({
									url: 'cambiarContrasenha',
									success: function(form, action) {
									   Ext.Msg.alert('Alpha Manager', 'Contraseña cambiada');
									   win.close();
									},
									failure: function(form, action) {
										Ext.Msg.alert('Error');
										form.reset();
									}
								});
							}
						}]
					}]
				}),{
						border: false
					}]
				});
				win.show();

                }
            },{
                xtype: 'button',
                itemId: 'imagen',
                text: '<b>Cambiar Imagen</b>',
                width: 120,
                iconCls: 'icon-imagen',
                handler: function() {
                    win = Ext.create('widget.window', {
					width: 420,
					iconCls: 'icon-alpha',
					title: 'CAMBIAR IMAGEN',
					closable: true,
					plain: true,
					layout: 'fit',
					items: [floater = Ext.create('Ext.Component', {
						xtype: 'component',
						floating: {
							shadow: false
						}
					}), formPanel = Ext.widget('form', {

					frame: true,
					bodyPadding: 10,
					fileUpload: true,
					defaults: {
						anchor: '100%'
					},
					items: [{
							xtype:'textfield',
							name: 'imagen',
							inputType:'file',
							fieldLabel: 'Archivo de Imagen'
					}],
					dockedItems: [{
						xtype: 'container',
						dock: 'bottom',
						layout: {
							type: 'hbox',
							align: 'middle'
						},
						items: [{
							xtype: 'button',
							formBind: true,
							disabled: true,
							text: 'Guardar',
							width: 60,
							handler: function() {
								
								var form = this.up('form').getForm();
								form.submit({
									url: 'adjuntar_imagen_usuario',
									waitMsg: 'Procesando...',
									success: function(form, action) {
									   Ext.Msg.alert('Alpha Manager', 'Imagen de Perfil Cambiada ');
									   win.close();
									   window.location = "perfil";
									},
									failure: function(form, action) {
										Ext.Msg.alert('Error');
										form.reset();
									}
								});
							}
						}]
					}]
				}),{
						border: false
					}]
				});
				win.show();
                    

                }
            },
            {
                xtype: 'button',
                hidden: true,
                itemId: 'guardar',
                text: '<b>Guardar</b>',
                iconCls: 'icon-save',
                width: 75,
                handler: function() {
                    var form = this.up('form').getForm();
                    
                    form.submit({
                        url: 'modificar_usuario_en_linea',
                        success: function(form, action) {
                           Ext.Msg.show({  
									title: '<br><p align="center"><b>ALPHA MANAGER</b></p>', //<- el título del diálogo  
									msg: 'Datos modificados satisfactoriamente', //<- El mensaje  
									icon: 'ext-mb-ok',
								});
							resetForm();
							
                        },
                        failure: function(form, action) {
                            Ext.Msg.show({  
										title: '<br><p align="center"><b>ALPHA MANAGER</b></p>', //<- el título del diálogo  
										msg: 'Error en la modificacion de los datos', //<- El mensaje  
										icon: 'ext-mb-error',
									});
                        }
                    });
                    

                }
            },
            {
                xtype: 'button',
                itemId: 'editar',
                text: '<b>Editar</b>',
                width: 70,
                iconCls: 'icon-editar',
                handler: function() {
                    
                    this.up('form').down('#guardar').show();
                    this.up('form').down('#noGuardar').show();
                    this.up('form').down('#imagen').hide();
                    this.up('form').down('#password').hide();
                    this.up('form').down('#f_nombre').setFieldStyle('background-color: #fff; border: 1px dotted;');
                    this.up('form').down('#f_apellido').setFieldStyle('background-color: #fff; border: 1px dotted;');
                    this.up('form').down('#f_nroTelefono').setFieldStyle('background-color: #fff; border: 1px dotted;');
                    this.up('form').down('#f_nroDocumento').setFieldStyle('background-color: #fff; border: 1px dotted;');
                    this.up('form').down('#f_mail').setFieldStyle('background-color: #fff; border: 1px dotted;');
                    this.hide();

                }
            },
            {
                xtype: 'button',
                hidden:true,
                itemId: 'noGuardar',
                iconCls: 'icon-no-save',
                text: '<b>No Guardar</b>',
                width: 90,
                handler: function() {
                    resetForm();
                }
            }]
       
        }]
    });
    function resetForm()
		{
			getDatosUsuario();
			formPanelPerfil.down('#editar').show();
			formPanelPerfil.down('#imagen').show();
			formPanelPerfil.down('#password').show();
			formPanelPerfil.down('#f_nombre').setFieldStyle('background-color: transparent; border: none;');
			formPanelPerfil.down('#f_apellido').setFieldStyle('background-color: transparent; border: none;');
			formPanelPerfil.down('#f_nroTelefono').setFieldStyle('background-color: transparent; border: none;');
			formPanelPerfil.down('#f_nroDocumento').setFieldStyle('background-color: transparent; border: none;');
			formPanelPerfil.down('#f_mail').setFieldStyle('background-color: transparent; border: none;');
			formPanelPerfil.down('#guardar').hide();
			formPanelPerfil.down('#noGuardar').hide();
		}
		
    function getDatosUsuario()
		{
			Ext.Ajax.request({
					url: 'info_usuario',
					method: 'GET',
					success: function(response) {
						var jsonData = Ext.JSON.decode(response.responseText);
						var resultMessage = jsonData['data'];
						
						formPanelPerfil.down('#f_nombreUsuario').setValue(extraer(resultMessage,'{nombreUsuario:','1}'));
						formPanelPerfil.down('#f_nombre').setValue(extraer(resultMessage,'{nombre:','2}'));
						formPanelPerfil.down('#f_apellido').setValue(extraer(resultMessage,'{apellido:','3}'));
						formPanelPerfil.down('#f_nroTelefono').setValue(extraer(resultMessage,'{telefono:','4}'));
						formPanelPerfil.down('#f_nroDocumento').setValue(extraer(resultMessage,'{nroDocumento:','5}'));
						formPanelPerfil.down('#f_inicioSesion').setValue(extraer(resultMessage,'{ultimaSesion:','6}'));						
						formPanelPerfil.down('#f_cierreSesion').setValue(extraer(resultMessage,'{ultimaSesionFinalizada:','7}'));
						formPanelPerfil.down('#f_mail').setValue(extraer(resultMessage,'{mail:','8}'));
						
						
					}
			});
		}
	getDatosUsuario();

	var winImagen = Ext.create('widget.window', {
					x:700,
					y: 240,
					resizable   : false,
					draggable   : false,
					iconCls: 'icon-imagen',
					title: 'IMAGEN DE PERFIL',
					closable: false,
					bodyStyle: 'background-color: #fff;',
					layout: 'fit',
					items: [{
						border: false
					},img = Ext.create('Ext.Img',{
					  id: 'img2',
					   height :300,
					   width: 300,
					   name: 'imgx',
					   src: 'imagen_usuario'
					})]
				});
				winImagen.show();
});

function extraer(texto, etqini, etqfin){
		var ind0, ind1, parte ="";
		ind0 = texto.indexOf(etqini);
		if (ind0 >=0){
			ind1 = texto.indexOf(etqfin);
			if (ind1>ind0)
				parte = texto.substring(ind0+etqini.length, ind1);
		}
		return parte;
}

